<template>
  <a-modal
    class="productManage"
    :visible="visible"
    :title="'新增视频'"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
    :closable="true"
    :confirmLoading="confirmLoading"
    width="800px"
    @cancel="closeModal()"
    @ok="handleSubmit"
  >
    <div>
      <div class="formItem">
        <div
          class="formLable"
          :style="{
            color: titleRule ? 'red' : '#000',
          }"
        >
          <span style="color: red">*</span>
          <div>视频标题：</div>
        </div>
        <div class="formInput">
          <a-input
            v-model="params.title"
            style="width: 200px"
            placeholder="输入视频标题，限2-18字"
            :max-length="18"
            :min-length="2"
          />
        </div>
      </div>

      <div class="formItem">
        <div
          class="formLable"
          :style="{
            color: videoUrlRule ? 'red' : '#000',
          }"
        >
          <span style="color: red">*</span>
          <div>上传视频：</div>
        </div>
        <div class="formInput">
          <UploadFileList
            :value="params.videoUrl"
            :accept="video.videoAccept"
            :fileSizeLimit="video.fileSizeLimit"
            :isVideo="true"
            @change="handleUploadChange"
            @remove="handleRemove"
          ></UploadFileList>
          <span class="patation"
            >注：视频大小不超过200M，仅支持mp4，mov，m4v格式</span
          >
        </div>
      </div>

      <div class="formItem">
        <div
          class="formLable"
          :style="{
            color: pictureUrlRule ? 'red' : '#000',
          }"
        >
          <span style="color: red">*</span>
          <div>上传视频封面：</div>
        </div>
        <div class="formInput">
          <div
            v-if="params.pictureUrl"
            @click="openUpload('image', params)"
            class="upload_wrap"
            :style="{
              background: `url(${params.pictureUrl}) no-repeat 50% 50%/cover`,
            }"
          >
            <p class="updateImg">更换图片</p>
          </div>
          <div
            v-else
            class="upload_wrap uploadBox"
            @click="openUpload('image', params)"
          >
            <a-icon type="plus" />
            <p>上传图片</p>
          </div>
          <span class="patation1">注：建议尺寸600px*600px</span>
        </div>
      </div>

      <div class="formItem">
        <div
          class="formLable"
          :style="{
            color: sortRule ? 'red' : '#000',
          }"
        >
          <span style="color: red">*</span>
          <div>视频排序：</div>
        </div>
        <div class="formInput">
          <a-input-number
            :precision="0"
            v-model="params.sort"
            placeholder="填写整数"
            style="width: 200px"
          />
          <span class="patation2"
            >注：数字越往大越靠后，相同序号按添加时间倒序排序</span
          >
        </div>
      </div>

      <div class="formItem">
        <div class="formLable">
          <div>虚拟点赞量：</div>
        </div>
        <div class="formInput">
          <a-input-number
            :precision="0"
            :min="0"
            v-model="params.virtualLike"
            placeholder="填写大于0的正整数"
            style="width: 200px"
          />
          <span class="patation3">注：虚拟点赞量将与实际点赞量叠加显示</span>
        </div>
      </div>
      <div class="formItem">
        <div class="formLable">
          <div>虚拟收藏量：</div>
        </div>
        <div class="formInput">
          <a-input-number
            :precision="0"
            :min="0"
            v-model="params.virtualCollect"
            placeholder="填写大于0的正整数"
            style="width: 200px"
          />
          <span class="patation3">注：虚拟收藏量将与实际收藏量叠加显示</span>
        </div>
      </div>
      <div class="formItem">
        <div
          class="formLable"
          :style="{
            color: labelIdsRule ? 'red' : '#000',
          }"
        >
          <!-- <span style="color: red">*</span> -->
          <div>添加视频标签：</div>
        </div>
        <div class="formInput">
          <div class="add_btn" @click="addTag">
            <img
              class="icon_add"
              src="~@images/shop/icon_right_attributebar_jiahao.png"
            />
            <span class="text">添加视频标签</span>
          </div>
          <div class="lables">
            <div class="lableItem" v-for="(l, i) in labelInfo" :key="i">
              {{ l.name }}
            </div>
          </div>
        </div>
      </div>

      <div class="formItem">
        <div class="formLable">
          <div>视频描述：</div>
        </div>
        <div class="formInput">
          <a-textarea
            v-model="params.description"
            style="width: 300px"
            :rows="4"
            placeholder="输入视频描述，限0-50字"
            :max-length="50"
          />
        </div>
      </div>

      <div class="formItem">
        <div
          class="formLable"
          :style="{
            color: platformRule ? 'red' : '#000',
          }"
        >
          <span style="color: red">*</span>
          <div>发布到：</div>
        </div>
        <div class="formInput" style="margin-top: 5px">
          <a-checkbox-group v-model="params.platform" :options="platformList" />
        </div>
      </div>
    </div>
    <video-modal
      :visible="visibleModal"
      @cancel="closeInfoModal"
      :ContentType="ContentType"
      :fileSize="fileSize"
      @upload="upload"
      :videoData="videoData"
    ></video-modal>
    <addVideoTag
      ref="addVideoTag"
      :labelIds="params.labelIds"
      @comfirmLanleId="comfirmLanleId"
      :shopRoleCode="shopRoleCode"
    >
    </addVideoTag>
    <template slot="footer">
      <a-button
        key="submit"
        type="primary"
        @click="handleSubmit(1)"
        v-if="show"
      >
        保存
      </a-button>
      <a-button type="primary" @click="handleSubmit(2)"> 保存并发布 </a-button>
      <a-button key="back" @click="closeModal"> 取消 </a-button>
    </template>
  </a-modal>
</template>
<script>
import UploadFileList from "./UploadFile";
import addVideoTag from "./addVideoTag.vue";
import videoModal from "@/components/antBase/videoModal";
export default {
  name: "addVideo",
  components: {
    UploadFileList,
    videoModal,
    addVideoTag,
  },
  props: {
    shopRoleCode: {
      type: String,
      default: "",
    },
    videoId: {
      type: String,
      default: "",
    },
    opration: {
      type: String,
      default: "add",
    },
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      params: {
        labelIds: [],
      },
      video: {
        videoAccept: "mp4,mov,m4v",
        fileSizeLimit: 1024 * 1024 * 200, //200M
      },
      visibleModal: false,
      ContentType: "image",
      fileSize: 1,
      videoData: {},
      platformList: [
        { label: "APP", value: "1" },
        { label: "小程序", value: "2" },
        { label: "TV大屏", value: "3" },
      ],
      labelInfo: [],
      show: true,
      titleRule: false,
      videoUrlRule: false,
      pictureUrlRule: false,
      sortRule: false,
      labelIdsRule: false,
      platformRule: false,
    };
  },
  methods: {
    async addNewVideo(params) {
      let res = await this.$post("/video/add", params);
      if (res && res.returnCode == 1000) {
        this.$message.success("新增视频成功");
        this.$emit("initTable");
      }
    },

    async updateVideo(params) {
      let res = await this.$post("/video/update", params);
      if (res && res.returnCode == 1000) {
        this.$message.success("修改视频成功");
        this.$emit("initTable");
      }
    },
    handleSubmit(a) {
      this.confirmLoading = true;
      let str = "";
      if (this.params.platform && this.params.platform.length > 0) {
        this.params.platform.forEach((item, i) => {
          if (i != this.params.platform.length - 1) {
            str = str + item + ",";
          } else {
            str = str + item;
          }
        });
      }
      let obj = JSON.parse(JSON.stringify(this.params));
      obj.platform = str;
      if (!this.params.title || this.params.title.length < 2) {
        this.$message.error("视频标题限2-18字");
        this.titleRule = true;
        return;
      } else {
        this.titleRule = false;
      }
      if (!this.params.videoUrl || this.params.videoUrl.length == 0) {
        this.$message.error("请上传视频");
        this.videoUrlRule = true;
        return;
      } else {
        this.videoUrlRule = false;
      }
      if (!this.params.pictureUrl || this.params.pictureUrl.length == 0) {
        this.$message.error("请上传视频封面");
        this.pictureUrlRule = true;
        return;
      } else {
        this.pictureUrlRule = false;
      }
      if ("sort" in this.params) {
        if (this.params.sort == null) {
          this.$message.error("请输入视频排序");
          this.sortRule = true;
          return;
        } else {
          this.sortRule = false;
        }
      } else {
        this.$message.error("请输入视频排序");
        this.sortRule = true;
        return;
      }
      // if (!this.params.labelIds || this.params.labelIds.length == 0) {
      //   this.$message.error("请选择视频标签");
      //   this.labelIdsRule = true;
      //   return;
      // } else {
      //   this.labelIdsRule = false;
      // }
      if (!this.params.platform || this.params.platform.length == 0) {
        this.$message.error("请选择发布平台");
        this.platformRule = true;
        return;
      } else {
        this.platformRule = false;
      }
      if (!obj.virtualCollect) {
        obj.virtualCollect = 0;
      }
      if (!obj.virtualLike) {
        obj.virtualLike = 0;
      }
      if (this.opration == "add") {
        if (a == 1) {
          obj.sendStatus = 1;
        } else {
          obj.sendStatus = 2;
        }
        this.addNewVideo(obj);
      } else {
        if (a == 1) {
          obj.sendStatus = 1;
        } else {
          obj.sendStatus = 2;
        }
        obj.id = this.videoId;
        this.updateVideo(obj);
      }
      this.visible = false;
    },
    closeModal() {
      this.visible = false;
      this.$emit("cancel", false);
    },
    handleUploadChange(file) {
      console.log(file);
      this.params.videoUrl = file.url;
      // this.params.videoSize = file.size;
      this.$message.success("上传成功");
    },
    handleRemove(file) {
      // console.log(file)
      this.params.videoUrl = "";
    },
    // 打开上传组件
    openUpload(a, b) {
      if (a == "video") {
        this.checkValue = { videoUrl: this.params.videoUrl };
      } else {
        this.checkValue = { imgUrl: this.params.pictureUrl };
      }
      this.ContentType = a;
      this.visibleModal = true;
    },
    upload(val) {
      this.visibleModal = false;
      this.videoData = val;
      this.$set(this.params, "pictureUrl", val.fileUrl);
    },

    closeInfoModal(type) {
      this.visibleModal = false;
    },

    addTag() {
      this.$refs.addVideoTag.visible = true;
    },
    async getVideoInfo(id) {
      let res = await this.$get("/video/id", { id });
      if (res && res.returnCode == 1000) {
        this.params = {
          title: res.dataInfo.title,
          videoUrl: res.dataInfo.videoUrl,
          pictureUrl: res.dataInfo.pictureUrl,
          sort: res.dataInfo.sort,
          labelIds: [],
          description: res.dataInfo.description,
          platform: res.dataInfo.platform.split(","),
          virtualCollect: res.dataInfo.virtualCollect || 0,
          virtualLike: res.dataInfo.virtualLike || 0,
        };
        this.labelInfo = res.dataInfo.labels;
        this.labelInfo.forEach((item) => {
          this.params.labelIds.push(item.id);
        });
        if (res.dataInfo.sendStatus == 2 && this.opration != "add") {
          this.show = false;
        } else {
          this.show = true;
        }
      }
    },

    comfirmLanleId(ids, e) {
      this.params.labelIds = ids;
      this.labelInfo = e;
      console.log(this.params.labelIds);
    },
  },
  watch: {
    visible(y) {
      if (y) {
        if (this.opration == "add") {
          this.params = {
            labelIds: [],
          };
          this.labelInfo = [];
          this.show = true;
        } else {
          this.getVideoInfo(this.videoId);
        }
      }
    },
  },
};
</script>
<style scoped lang="less">
.formItem {
  display: flex;
  // align-items: center;
  .formLable {
    margin-top: 5px;
    width: 25%;
    // text-align: right;
    display: flex;
    justify-content: flex-end;
    // align-items: flex-start;
  }
  .formInput {
    width: 75%;
    position: relative;
    .patation {
      position: absolute;
      top: 5px;
      right: 70px;
      color: #d9d9d9;
    }
    .patation1 {
      position: absolute;
      top: 20px;
      right: 300px;
      color: #d9d9d9;
    }
    .patation2 {
      position: absolute;
      top: 5px;
      right: 10px;
      color: #d9d9d9;
    }
    .patation3 {
      position: absolute;
      top: 5px;
      right: 95px;
      color: #d9d9d9;
    }
  }
}
.formItem + .formItem {
  margin-top: 20px;
}

.uploadBox {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  p {
    text-align: center;
    font-size: 12px;
    margin-top: 4px;
  }
}
.upload_wrap {
  width: 60px;
  height: 60px;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  .updateImg {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    position: absolute;
    bottom: 0;
    text-align: center;
    white-space: nowrap;
    font-size: 12px;
  }
}
.upload_wrap:hover {
  border-color: skyblue;
}
.uploadText {
  font-size: 12px;
  font-family: MicrosoftYaHei;
  color: #999999;
  margin: 22px 0 0 14px;
}
.bgupload {
  background: #fafafa;
  padding: 10px;
}
.bguploadArea {
  display: flex;
  background: #ffffff;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
  padding: 10px;
  border-radius: 2px;
}
.add_btn {
  cursor: pointer;
  height: 30px;
  line-height: 30px;
  width: 150px;
  position: relative;
  text-align: center;
  font-family: MicrosoftYaHei;
  font-size: 14px;
  background-color: #fff;
  color: #016bff;
  border: 1px solid #016bff;
  .icon_add {
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
  }
  .text {
    color: #016bff;
  }
}
.lables {
  display: flex;
  flex-wrap: wrap;
  .lableItem {
    padding: 5px 12px;
    border-radius: 100000px;
    color: #fff;
    background: #79d1f7;
    margin: 10px 0;
    cursor: pointer;
  }
  .lableItem + .lableItem {
    margin-left: 10px;
  }
}
</style>